.main_process {
  display: flex;

  .single_prize {
    width: 100px;
    height: 120px;
    .prize_main {
      background: linear-gradient(136.64deg, #FFFAF5 28.45%, #FFFFFF 79.88%);
      border: 1px solid #f38787;
      border-radius: 12px;
      width: 70px;
      height: 100px;
      /* 未打 */
      margin-left: 50%;
      transform: translateX(-50%);

      display: flex;
      justify-content: center;
      align-content: center;
      flex-direction: column;


      .prize_pic {
        background: url(./imgs/flower.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        width: 30px;
        height: 30px;
        margin-left: 50%;
        transform: translateX(-50%);
      }

      .prize_message {
        margin-left: 50%;
        transform: translateX(-50%);
        /* x 50 */

        font-family: 'Manrope';
        font-style: normal;
        font-weight: 300;
        font-size: 24px;
        line-height: 33px;
        /* identical to box height */
        text-align: center;
        letter-spacing: -1px;

        color: rgba(17, 17, 17, 0.5);


      }
    }
    .prize_process {
      margin-top: 20px;
      margin-bottom: 20px;
      width: calc(100% + 5px);
      height: 4px;
      border-radius: 2px;
      background: #D3D5E6;
      &.activate_half {
        position: relative; /* 为伪元素设置定位上下文 */
        background: #D3D5E6; /* 设置右边50%的颜色 */
      }
      &.activate_half::before {
        content: ""; /* 伪元素需要content属性 */
        position: absolute; /* 绝对定位 */
        top: 0;
        left: 0;
        width: 50%; /* 左边50%的宽度 */
        height: 100%; /* 与父元素等高 */
        background: #FE4F4F; /* 设置左边50%的颜色 */
        z-index: 0; /* 确保伪元素在背景层之下 */
      }

      &.activate_full {
        background: #FE4F4F;
      }
    }

    .prize_process_round {
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background: #D3D5E6;
      margin-left: 50%;
      transform: translateX(-50%) translateY(-270%);
      z-index: 3;

      &.activate {
        background: url("./imgs/right.png");
        width: 20px;
        height: 20px;
        transform: translateX(-50%) translateY(-160%);
      }
    }

    .prize_message {
      margin-left: 50%;
      transform: translateX(-50%);
      width: 48px;
      height: 34px;
      font-family: 'PingFang SC';
      font-style: normal;
      font-weight: 300;
      font-size: 24px;
      line-height: 34px;
      /* identical to box height */
      text-align: center;
      color: #11114780;

      &.activate {
        transform: translateX(-50%) translateY(-25%);
      }
    }
  }
}